<template name="work">
	<view>
		<u-popup :show="popshow" @close="close" :closeable="true" mode="center" :round="10">
			<view class="pop-main">
				<view class="pop-title">完善职业信息</view>
				<view class="pop-box" :style="'height:'+ pop_height">
					<u-cell>
						<view slot="title" class="cell-title">职业</view>
						<view slot="value" class="cell-value" :class="data.vocation==''?'no-select':''" @click="picker=true">
							{{data.vocation || "请选择职业"}}
						</view>
					</u-cell>
					<u-cell>
						<view slot="title" class="cell-title">部门职位</view>
						<view slot="value">
							<input v-model="data.position" class="form-input" placeholder="职位"/>
						</view>
					</u-cell>
				</view>
				<view class="pop-foot">
					<button class="my-but-primary" @click="addData()">确定</button>
				</view>
			</view>
		</u-popup>
		
		<my-picker :show="picker" :columns="[$config.vocation_list]" @cancel="picker=false" @confirm="confirmVocation"></my-picker>
	</view>
</template>

<script>
	import { mapState } from 'vuex'
	export default {
		name: 'work',
		props: {
			show:{
				type:[Boolean],
				default:false,
			}
		},
		data() {
			return {
				popshow:false,
				picker:false,
				form_label_width:80,
				data:{				//添加信息
					vocation: '',
					position: '',
				}
			};
		},
		watch: {
			show(val){
				this.popshow=val
			}
		},
		computed: {
			...mapState({
				$config:state => state.$config,
				$s:state => state.$style,
			})
		},
		onReady(){
		},
		mounted() {
		},
		methods: {
			//完善工作信息
			addData(){
				if(!this.data.vocation){
					this.$c.info('请选择职业')
				}else if(!this.data.position){
					this.$c.info('请输入部门职位')
				}else{
					this.$u.api.userUp(this.data).then(res=>{
						this.$c.success('操作成功')
						this.popshow=false
						
						let than=this
						setTimeout(function() {
							than.$emit('success',true)
						},1300);
					})
				}
			},
			//确定部门职位
			confirmVocation(e){
				this.data.vocation=e.value[0]
				this.picker=false
			},
			close(){
				this.popshow=false
			}
		}
	};
</script>

<style lang="scss">
	.pop-main{
		width: 600rpx;
	}
	.pop-box{
		padding:40rpx 20rpx;
	}
	.form-input{
		font-size: 28rpx;
	}
	.cell-title{
		font-size: 28rpx;
		width: 160rpx;
	}
	.cell-value{
		text-align: right;
		width: 420rpx;
		font-size: 28rpx;
	}
	.no-select{
		color: $u-tips-color;
	}
</style>
